<template>
    <div id="notice-detail">
        <el-row class="card-box">
            <el-card class="form-box">
                <el-form :label-position="labePosition" label-width="127px" size="mini">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知规则名称:">
                                <el-select
                                    :disabled="showType === 'editReminderRules'"
                                    placeholder="请选择"
                                    style="width: 100%"
                                    v-model="ruleForm.ruleName"
                                    @change="changeRuleName"
                                >
                                    <el-option
                                        v-for="item in ruleNameStorage"
                                        :key="item.cRuleId"
                                        :label="item.cRuleId + ' ' + item.cRuleName"
                                        :value="item.cRuleName"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知类型:">
                                <el-select placeholder="请选择" style="width: 100%" v-model="ruleForm.noticeType" @change="changeNoticeType">
                                    <el-option
                                        v-for="item in noticeTypeStorage"
                                        :key="item.dictKey"
                                        :label="item.dictKey + ' ' + item.dictKeyName"
                                        :value="item.dictKey"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="邮件发送方式:">
                                <el-select
                                    placeholder="请选择"
                                    style="width: calc(100% - 137px)"
                                    v-model="ruleForm.scheduleType"
                                    @change="changeParam('scheduleType')"
                                >
                                    <el-option label="汇总发送" value="1"></el-option>
                                </el-select>
                                <span>启用状态:</span>
                                <el-switch v-model="ruleForm.status" active-value="0" inactive-value="1" style="margin-left: 4px" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知次数上限:">
                                <el-input-number
                                    v-model="ruleForm.limitTimes"
                                    @input.native="onInput"
                                    :disabled="['1', '2'].includes(ruleForm.scheduleType)"
                                    controls-position="right"
                                    :min="1"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知日期区间:">
                                <el-date-picker
                                    v-model="ruleForm.dates"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    style="width: 90%"
                                    @change="handleDate"
                                    value-format="yyyyMMdd"
                                    format="yyyy-MM-dd"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content">
                                                {{ iconTooltipPojo[ruleForm.scheduleType] }}
                                                <!-- {{ ruleForm.scheduleType == '0' ? '通知时间段对应邮件的发送时间' : '汇总发送该时点近24小时的数据' }} -->
                                            </div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        {{ labelPojo[ruleForm.scheduleType] }}
                                        <!-- {{ ruleForm.scheduleType == '0' ? '通知时间段:' : '通知时间点' }} -->
                                    </span>
                                </template>
                                <el-time-picker
                                    v-model="ruleForm.startTime"
                                    value-format="HHmmss"
                                    format="HH:mm:ss"
                                    placeholder="选择时间点"
                                    v-show="ruleForm.scheduleType == '1'"
                                >
                                </el-time-picker>
                                <el-time-picker
                                    is-range
                                    v-model="ruleForm.times"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    style="width: 90%"
                                    @change="handleTime"
                                    value-format="HHmmss"
                                    format="HH:mm:ss"
                                    v-show="ruleForm.scheduleType == '0'"
                                >
                                </el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知用户:">
                                <el-tooltip :disabled="!ruleForm.noticeUser || !ruleForm.noticeUser.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.noticeUser">
                                            {{ e + ' ' + userStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        class="selets"
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.noticeUser"
                                        @change="changeAccountControlValue(ruleForm.noticeUser, 'userCode')"
                                    >
                                        <el-option
                                            v-for="item in userStorage"
                                            :key="item.userCode"
                                            :label="item.userName + ' ' + item.userNickName"
                                            :value="item.userCode"
                                        >
                                            <span style="float: left">{{ item.userName + ' ' + item.userNickName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知岗位:">
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content">若所选通知用户和通知岗位中存在相同的用户，则取其并集；</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        通知岗位:
                                    </span>
                                </template>

                                <el-tooltip :disabled="!ruleForm.notifier || !ruleForm.notifier.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.notifier">
                                            {{ e + ' ' + roleStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        class="selets"
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.notifier"
                                        @change="changeAccountControlValue(ruleForm.notifier, 'roleCode')"
                                    >
                                        <el-option
                                            v-for="item in roleStorage"
                                            :key="item.roleCode"
                                            :label="item.roleCode + ' ' + item.roleName"
                                            :value="item.roleCode"
                                        >
                                            <span style="float: left">{{ item.roleCode + ' ' + item.roleName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="ruleForm.noticeType == '15'">
                            <el-form-item label="正文发送列设置:">
                                <el-select
                                    placeholder="请选择"
                                    multiple
                                    filterable
                                    collapse-tags
                                    style="width: 100%"
                                    clearable
                                    v-model="ruleForm.columns"
                                    @change="changeAccountControlValue(ruleForm.columns, 'dictKey')"
                                >
                                    <el-option
                                        v-for="item in columnsStorage"
                                        :key="item.dictKey"
                                        :label="item.dictKeyName"
                                        :value="item.dictKey"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" v-if="ruleForm.noticeType == '12'">
                            <el-form-item label="超时时长:>">
                                <el-input v-model="ruleForm.timeoutDuration" @input.native="onInput" style="width: 65%"></el-input><span> min</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" v-if="ruleForm.noticeType == '12'">
                            <el-form-item label="启用状态:" class="left-label2">
                                <el-switch v-model="ruleForm.status" active-value="0" inactive-value="1" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </el-row>
        <el-row class="card-box">
            <el-card>
                <el-row>
                    <div style="display: inline-block">
                        <span>邮件主题： </span>
                    </div>
                    <div style="display: inline-block">
                        <el-input v-model="ruleForm.emailSubject" :disabled="!isEdit" size="mini" style="width: 1000px"></el-input>
                    </div>

                    <div class="link-box" v-if="isShowSubmit">
                        <el-link icon="el-icon-edit" v-show="!isEdit" @click="handleEdit">编辑</el-link>
                        <el-link icon="el-icon-view" v-show="isEdit" @click="handleEdit">预览</el-link>
                    </div>
                </el-row>
                <el-row class="email-title">
                    <h2 v-show="!isEdit">{{ ruleForm.greeting }}</h2>
                    <div v-show="isEdit" class="title-ipt">
                        <el-input v-model="ruleForm.greeting"></el-input>
                    </div>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <div v-show="!isEdit" class="text-box">{{ ruleForm.mainBody }}</div>
                    <el-input v-show="isEdit" type="textarea" autosize placeholder="请输入内容" v-model="ruleForm.mainBody"> </el-input>
                </el-row>
                <el-row>
                    <el-table ref="emailTable" :data="emailTable" border size="mini" style="width: 100%" height="calc(100vh - 600px)">
                        <el-table-column v-for="i in emailTableColumns" :prop="i.dictKey" :key="i.dictKey" :label="i.dictKeyName" min-width="100">
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-card>
        </el-row>
        <el-row class="card-box">
            <el-card>
                <div class="btns">
                    <el-button @click="$emit('close-tab', data.name)">取消</el-button>
                    <el-button v-if="isShowSubmit" type="primary" @click="submit" :loading="btnLoading">确认</el-button>
                </div>
            </el-card>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions } from '@/utils/tools';
import RiskEntryInputs from '@/common/components/risk-entry-inputs.vue';
import * as moment from 'moment';
@Component({
    name: 'WarningNoticeDetailReminderRules',
    components: { RiskEntryInputs },
})
export default class WarningNoticeDetailReminderRules extends Vue {
    @Prop() data: any;

    private labePosition: string = 'right';

    defaultTime: any = new Date(0, 0, 0, moment().hour(), 0, 0);
    defaultTime2: any = new Date(0, 0, 0, moment().hour() + 1, 0, 0);
    limitTimeTitle: string = window.project_config.LIMIT_TIMES_TITLE || '该字段为在设置时间段内发送次数上限，非重复发送邮件次数';
    private ruleForm = {
        ruleId: '',
        scheduleType: '1',
        ruleName: '',
        noticePanel: '',
        noticeType: '15',
        thresholdType: ['1', '2', '3'],
        limitTimes: null,
        dates: [],
        startDate: '',
        endDate: '',
        entryCode: [],
        entryGroup: [],
        roleCodes: [],
        calcType: '0',
        fundCode: '',
        fundGroup: [],
        times: null,
        startTime: '',
        endTime: '',
        noticeUser: [],
        notifier: [], // 通知岗位
        prohibitionDays: '', // 连续违规天数
        timeoutDuration: '30',
        columns: [],
        status: '0',
        emailSubject: '待办提醒结果通知', // 邮件标题
        greeting: '待办提醒结果通知',
        mainBody: '尊敬的领导：\n 您好！\n 根据智能风控工作台监控，"待办提醒结果"有更新变动，请及时关注！',
    };
    // 问号图标显示文字
    private iconTooltipPojo: any = {
        '0': '通知时间段对应邮件的发送时间',
        '1': '汇总发送该时点近24小时的数据',
        '2': '从当日0时开始，每间隔所设定的时间，汇总发送一次邮件',
    };
    // label标签
    private labelPojo: any = {
        '0': '通知时间段:',
        '1': '通知时间点:',
        '2': '间隔频率:',
    };

    private noticePanelStorage: any[] = [];

    private thresholdTypeStorage: any[] = [];

    private noticeTypeStorage: any[] = [{ dictKey: '15', dictKeyName: '触发提醒类' }];

    private ruleNameStorage: any[] = []; // 可新增规则名称列表

    private fundGroup: any[] = [];
    private fundGroupStorageEnum: any = {};
    private userStorage: any[] = [];
    private userStorageEnum: any = {};
    private showType: string = 'addReminderRules';

    private btnLoading: boolean = false;

    private columnsStorage: any[] = [
        { dictKey: 'cFundCode', dictKeyName: '产品代码' },
        { dictKey: 'fundName', dictKeyName: '产品名称' },
        { dictKey: 'reminderContent', dictKeyName: '提醒内容' },
        { dictKey: 'entryTagNames', dictKeyName: '条目标签' },
        { dictKey: 'depositaryName', dictKeyName: '受托人' },
        { dictKey: 'fundManagerName', dictKeyName: '投资经理' },
        { dictKey: 'nAccuYield', dictKeyName: '当前产品收益率' },
        { dictKey: 'intervalRangeName', dictKeyName: '所在止损区间' },
        { dictKey: 'entryCode', dictKeyName: '触发条目编号' },
        { dictKey: 'entryName', dictKeyName: '风险说明' },
        { dictKey: 'stopLossTriggerType', dictKeyName: '触发类型' },
        { dictKey: 'thresholdType', dictKeyName: '触警结果' },
        { dictKey: 'cNoticeTriggerType', dictKeyName: '提醒条目触警结果' },
        { dictKey: 'cStatus', dictKeyName: '待办状态' },
        { dictKey: 'cEventTag', dictKeyName: '待办标签' },
        { dictKey: 'cEventContent', dictKeyName: '待办备注' },
        { dictKey: 'tradeDate', dictKeyName: '数据日期' },
        { dictKey: 'dCtDate', dictKeyName: '计算时间' },
        { dictKey: 'cNoticeEntryCode', dictKeyName: '提醒条目编号' },
        { dictKey: 'cNoticeEntryName', dictKeyName: '提醒条目风险说明' },
        { dictKey: 'cNoticeThresholdValue', dictKeyName: '提醒条目控制值' },
        { dictKey: 'cNoticeResult', dictKeyName: '提醒条目计算结果值' },
        { dictKey: 'opUserName', dictKeyName: '操作人' },
        { dictKey: 'dOpTime', dictKeyName: '操作时间' },
    ];

    private emailTable: any[] = [
        {
            cFundCode: '',
            fundName: '',
            reminderContent: '',
            entryTagNames: '',
            depositaryName: '',
            fundManagerName: '',
            nAccuYield: '',
            intervalRangeName: '',
            entryCode: '',
            entryName: '',
            thresholdType: '',
            cNoticeTriggerType: '',
            cStatus: '',
            cEventTag: '',
            cEventContent: '',
            dCtDate: '',
            cNoticeEntryCode: '',
            cNoticeEntryName: '',
            cNoticeThresholdValue: '',
            cNoticeResult: '',
            opUserName: '',
            dOpTime: '',
            stopLossTriggerType: '',
        },
    ];

    private isEdit: boolean = false; // 文本是否在编辑状态

    private ThresholdType: any = {
        '0': '无',
        '1': '上升',
        '2': '下降',
        '3': '跟踪',
        '4': '恢复',
    }; // 触警类型

    private entryStorage: any[] = [];
    private entryStorageEnum: any = {};
    private entryGroupStorage: any[] = [];
    private entryGroupStorageEnum: any[] = [];
    private roleStorage: any[] = [];
    private roleStorageEnum: any = {};
    async mounted() {
        // 条目下拉框
        this.getEntryList();
        // 条目组下拉框
        this.getEntryGroupList();
        // 通知面板下拉框
        this.getNoticePanelList();
        // 用户列表
        this.getUserList();
        // 角色列表
        this.getRoleList();
        // 账户组
        this.getFundGroupList();
        // 触警类型下拉框
        this.thresholdTypeStorage = await SGU_CACHE('ThresholdType', '/dict/list/code/Y_000039', []);
        // 触发提醒类-可新增规则名称列表
        this.listNotUseRule();

        if (this.data.type.indexOf('add') > -1) {
            this.ruleForm.columns = this.columnsStorage.map(i => i.dictKey);
        }
    }

    // 监听父组件带进来的基础数据
    @Watch('data', { immediate: true, deep: true })
    watchData(newData) {
        if (newData) {
            if (newData.content) {
                let data = JSON.parse(JSON.stringify(newData.content));
                data.dates = [String(...(data.startDate || '')), String(...(data.endDate || ''))];
                data.startTime = String(data.startTime || '');
                data.endTime = String(data.endTime || '');
                // if (data.startTime) {
                //     data.times = [data.startTime.toString(), data.endTime.toString()];
                // } else {
                //     data.times = null;
                // }
                this.ruleForm = data ?? this.ruleForm;
            }
            this.showType = newData.type;
        }
    }
    changeRuleName(param) {
        let arr = this.ruleNameStorage.filter(i => {
            return param == i.cRuleName;
        });
        let data = arr[0];
        this.ruleForm.ruleId = data.cRuleId;
    }
    // 改变通知类型
    changeNoticeType(param) {
        if (param == '15') {
            this.ruleForm.mainBody = '尊敬的领导：\n 您好！\n 根据智能风控工作台监控，"风险报告结果"有更新变动，请及时关注！';
        } else if (param == '12') {
            this.ruleForm.mainBody = '尊敬的领导：\n 您好！\n 根据智能风控工作台监控，本次风险计算结果已发生异常（计算超时/计算失败），请及时关注！';
        }
    }

    get emailTableColumns() {
        let columns = [];
        if (this.ruleForm.columns) {
            for (let i = 0; i < this.ruleForm.columns.length; i++) {
                const element = this.ruleForm.columns[i];
                if (this.columnsStorage.length) {
                    columns.push(this.columnsStorage.find(item => item.dictKey === element));
                }
            }
        }
        return columns;
    }

    get isShowSubmit() {
        return ['addReminderRules', 'editReminderRules'].includes(this.showType);
    }

    // 获取条目列表
    private getEntryList(): void {
        this.$axios
            .post('/entry/list/CodeOrName', {
                codeOrName: '',
                entryType: '',
                paging: { currentPage: 1, pageSize: 19960831 },
                filterEntryCode: [],
            })
            .then((res: any) => {
                this.entryStorage = res.list;
                this.changeAccountControlValue(this.ruleForm.entryCode, 'entryCode');
                this.changeAccountControlValue(this.ruleForm.columns, 'dictKey');
                res.list.forEach(element => {
                    this.entryStorageEnum[element.entryCode] = element.entryName;
                });
            });
    }

    // 获取条目列表
    private getEntryGroupList(): void {
        this.$axios.get('/entry/group/list').then((res: any) => {
            this.entryGroupStorage = res;
            this.changeAccountControlValue(this.ruleForm.entryGroup, 'groupCode');
            res.forEach(element => {
                this.entryGroupStorageEnum[element.groupCode] = element.groupName;
            });
        });
    }

    private listNotUseRule() {
        this.$axios.post('/htscamc/eventRule/listNotUseRule').then((res: any) => {
            this.ruleNameStorage = res;
        });
    }

    private getNoticePanelList() {
        this.$axios.get('/entry/subscribe/all/panel/user').then((res: any) => {
            this.noticePanelStorage = res;
        });
    }

    private getUserList(): void {
        this.$axios.get('/userManage/user/list').then((res: any) => {
            if (res) {
                this.userStorage = res.filter(item => item.userEnable === '1');
                this.changeAccountControlValue(this.ruleForm.noticeUser, 'userCode');
                // this.userStorage = res;
                res.forEach(element => {
                    this.userStorageEnum[element.userCode] = element.userNickName;
                });
                let noticeUser = JSON.parse(JSON.stringify(this.ruleForm.noticeUser));
                this.ruleForm.noticeUser = noticeUser.filter(key => {
                    const index = this.userStorage.findIndex(item => item.userCode == key && item.userEnable === '1');
                    return index > -1;
                });
            }
        });
    }

    private getRoleList(): void {
        this.$axios.get('/role/query/all').then((res: any) => {
            if (res) {
                this.roleStorage = res;
                this.changeAccountControlValue(this.ruleForm.notifier, 'roleCode');
                res.forEach(element => {
                    this.roleStorageEnum[element.roleCode] = element.roleName;
                });
            }
        });
    }

    changeParam(param: string) {
        if (param == 'scheduleType') {
            this.ruleForm.limitTimes = '1';
            this.ruleForm.startTime = '';
            this.ruleForm.endTime = '';
        }
    }

    // 获取账户组数据
    private getFundGroupList(): void {
        this.$axios.post('/fundGroup/list').then((res: any) => {
            this.fundGroup = res;
            this.changeAccountControlValue(this.ruleForm.fundGroup, 'fundGroupCode');
            res.forEach(element => {
                this.fundGroupStorageEnum[element.fundGroupCode] = element.fundGroupName;
            });
        });
    }

    private handleDate(val: any) {
        if (val && val.length) {
            this.ruleForm.startDate = val[0];
            this.ruleForm.endDate = val[1];
            return;
        }
        this.ruleForm.startDate = '';
        this.ruleForm.endDate = '';
    }

    // private handleTime(val: any) {
    //     console.log(val, 'val');
    //     if (val && val.length) {
    //         this.ruleForm.startTime = val[0];
    //         this.ruleForm.endTime = val[1];
    //         return;
    //     }
    //     this.ruleForm.startTime = '';
    //     this.ruleForm.endTime = '';
    // }

    private handleTime() {
        if (this.ruleForm.startTime && this.ruleForm.endTime) {
            if (this.ruleForm.startTime > this.ruleForm.endTime) {
                this.yh_message_warn('开始时间不得晚于结束时间!');
                this.ruleForm.startTime = '';
                this.ruleForm.endTime = '';
                return;
            }
        }
    }

    private getAccountControlValue(val: any) {
        this.ruleForm.fundCode = val;
    }

    private submit() {
        if (!this.verify()) {
            return;
        }
        this.ruleForm.limitTimes = this.ruleForm.limitTimes ? Number(this.ruleForm.limitTimes) : null;

        this.btnLoading = true;

        let urlType = {
            addReminderRules: '/notice/monitor/rule/add',
            editReminderRules: '/notice/monitor/rule/update',
        };
        let url = urlType[this.showType];
        this.$axios({ url, method: 'post', data: this.ruleForm })
            .then((res: any) => {
                this.btnLoading = false;
                this.yh_message_success('操作成功！');
                this.$emit('close-tab', this.data.name);
            })
            .catch(() => {
                this.btnLoading = false;
            });
    }

    private verify() {
        if (!this.ruleForm.ruleName) {
            this.yh_message_warn('规则名称不能为空！');
            return false;
        }
        if (!this.ruleForm.startTime) {
            this.yh_message_warn('通知时间点不能为空！');
            return false;
        }
        if (!this.ruleForm.noticeUser.length) {
            this.yh_message_warn('通知用户不能为空！');
            return false;
        }
        if (this.ruleForm.noticeType == '15') {
            if (!this.ruleForm.columns.length) {
                this.yh_message_warn('正文发送列不能为空！');
                return false;
            }
        }
        if (this.ruleForm.noticeType == '12') {
            if (this.ruleForm.timeoutDuration == '') {
                this.yh_message_warn('超时时长不能为空！');
                return false;
            }
        }
        return true;
    }

    // 下拉框数据置顶
    private changeAccountControlValue(val: any = [], field): void {
        // let arr = [];
        // if (val.some(item => item === '-1')) {
        //     arr.push({ label: '选择全部' });
        // } else {
        //     if (field === 'roleCode') {
        //         this.changeByFund();
        //     }
        // }

        // 下拉框选中数据置顶
        if (field == 'fundGroupCode') {
            this.fundGroup = changeOptions(val, this.fundGroup, field);
        } else if (field == 'userCode') {
            this.userStorage = changeOptions(val, this.userStorage, field);
        } else if (field == 'entryCode') {
            this.entryStorage = changeOptions(val, this.entryStorage, field);
        } else if (field == 'groupCode') {
            this.entryGroupStorage = changeOptions(val, this.entryGroupStorage, field);
        } else if (field == 'roleCode') {
            this.roleStorage = changeOptions(val, this.roleStorage, field);
        } else if (field == 'dictKey') {
            this.columnsStorage = changeOptions(val, this.columnsStorage, field);
        }
    }
    /**
     * 获取下拉数据 根据已选择数据排序
     * @param selectedData 已选择的数据
     * @param optionsData 所有选项数据
     * @param key 排序的键值
     * @returns 排序后的结果数组
     */
    sortCheckOptions(selectedData: any[], optionsData: any[], key: string): any[] {
        const selectedOptions = selectedData.map(item => optionsData.find(option => item === option[key])).filter(Boolean);
        // 将已选中项进行排序 (根据角色[0]排在一起)
        selectedOptions.sort((a, b) => Number(b.sortId.replace('YH', '')) - Number(a.sortId.replace('YH', '')));
        const otherOptions = optionsData.filter(option => !selectedOptions.includes(option));
        const sortedOptions = [...selectedOptions, ...otherOptions];

        const map = new Map();
        for (const item of sortedOptions) {
            if (!map.has(item[key])) {
                map.set(item[key], item);
            }
        }
        const newArr = [...map.values()];
        return newArr;

        // return [...new Set(sortedOptions.map(option => option[key]))].map(key => sortedOptions.find(option => option[key] === key));
    }

    private handleEdit() {
        this.isEdit = !this.isEdit;
    }

    private onInput(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    }
}
</script>
<style lang="scss" scoped>
#notice-detail {
    height: 100%;
    overflow: auto;
    .card-box {
        margin-bottom: 10px;
        .form-box {
            .left-label {
                /deep/ .el-form-item__label {
                    width: 80px !important;
                }
                /deep/ .el-form-item__content {
                    margin-left: 80px !important;
                }
            }
            /deep/ .el-input--mini {
                width: 70%;
            }
            /deep/ .el-form-item__label {
                color: black;
            }
            /deep/ .el-date-editor .el-range-separator {
                padding: 0 15px;
            }
        }
        .email-title {
            margin-bottom: 20px;
            h2 {
                text-align: center;
                font-size: 1.5em;
            }
            .title-ipt {
                width: 200px;
                margin: 0 auto;
                /deep/ .el-input__inner {
                    font-size: 1.5em;
                }
            }
        }
        .text-box {
            font-family: monospace;
            font-size: inherit;
            white-space: pre-wrap;
        }
        .link-box {
            display: inline-block;
            float: right;
            padding-right: 10px;
            /deep/ .el-link {
                margin: 0 5px;
            }
        }
        .btns {
            display: inline;
            float: right;
            padding-bottom: 20px;
        }

        /deep/ .el-checkbox-group {
            height: 25px;
            .el-checkbox {
                margin-right: 5px;

                .el-checkbox__label {
                    padding-left: 5px;
                }
            }
        }

        .h3-style {
            span {
                margin: 0 30px 0 10px;
                color: red;
            }
        }
    }
}
.left-label2 {
    /deep/ .el-form-item__label {
        width: 95px !important;
    }
    /deep/ .el-form-item__content {
        margin-left: 95px !important;
    }
}
/deep/ .selets {
    .tags-select-input {
        height: 40px;
        .el-select__tags {
            height: 40px;
            white-space: nowrap;
            overflow: hidden;
            flex-wrap: nowrap;
        }
    }

    .el-select__tags-text {
        display: inline-block;
        max-width: 85px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .el-tag__close.el-icon-close {
        top: -7px;
    }
}
/deep/ .el-input-number {
    width: 80%;
    .el-input--mini {
        width: 90% !important;
    }
}
// /deep/ .el-input--suffix .el-input__inner {
//     height: 28px !important;
// }

// /deep/ .el-select__tags {
//     height: 28px !important;
// }

// /deep/ .el-select__tags span.el-tag:first-child .el-select__tags-text {
//     width: calc(100% - 18px);
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
//     display: inline-block;
// }

// /deep/ .el-select__tags span.el-tag:first-child {
//     width: 45%;

//     .el-tag__close {
//         top: -3px;
//     }
// }

// /deep/ .el-select__tags span.el-tag:nth-child(2) {
//     padding: 0 5px;
// }
</style>
